<template>
  <el-main>
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow">新增</el-button>

    <el-table
      :data="menuList"
      style="width: 100%; margin-top: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children'}"
    >
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag size="normal" v-if="scope.row.type === 0">目录</el-tag>
          <el-tag size="normal" type="success" v-if="scope.row.type === 1">菜单</el-tag>
          <el-tag size="normal" type="warning" v-if="scope.row.type === 2">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')"></i>
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件路径"></el-table-column>
      <el-table-column label="操作选项" width="200" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit-outline" type="primary" size="small" @click="editMenu(scope.row)">编辑</el-button>
          <el-button icon="el-icon-close" type="danger" size="small" @click="deleteMenu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <system-dialog :title="menuDialog.title" :width="menuDialog.width" :height="menuDialog.height"
                   :visible="menuDialog.visible" @onClose="onClose" @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="menu" ref="menuForm" :rules="rules" label-width="80px" :inline="true" size="small">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="menu.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <el-radio :label="2">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="parentName" size="small" label="所属菜单">
            <el-input @click.native="selectParentMenu" v-model="menu.parentName" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item prop="label" size="small" label="菜单名称">
            <el-input v-model="menu.label"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单图标">
            <my-icon @selecticon="setIcon" ref="child"></my-icon>
          </el-form-item>
          <el-form-item prop="name" v-if="menu.type === 1" size="small"
                        label="路由名称">
            <el-input v-model="menu.name"></el-input>
          </el-form-item>
          <el-form-item prop="path" v-if="menu.type !== 2" size="small" label="路由地址">
            <el-input v-model="menu.path"></el-input>
          </el-form-item>
          <el-form-item prop="url" v-if="menu.type === 1" size="small" label="组件路径">
            <el-input v-model="menu.url"></el-input>
          </el-form-item>
          <el-form-item prop="code" size="small" label="权限字段">
            <el-input v-model="menu.code"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单序号">
            <el-input v-model="menu.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>

    <system-dialog :title="parentDialog.title" :width="parentDialog.width" :height="parentDialog.height"
                   :visible="parentDialog.visible" @onClose="onParentClose" @onConfirm="onParentConfirm">
      <div slot="content">
        <el-tree style="font-size: 14px" ref="parentTree" :data="parentMenuList" node-key="id" :props="defaultProps"
                 empty-text="暂无数据" :show-checkbox="false" :default-expand-all="true" :highlight-current="true"
                 :expand-on-click-node="false" @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{ node, data }">

            <span v-if="data.children.length === 0">
              <i class="el-icon-document" style="color: black"></i>
            </span>

            <span v-else @click.stop="openBtn(data)">
              <i v-if="data.open" class="el-icon-circle-plus-outline" style="color: red"></i>
              <i v-else class="el-icon-remove-outline" style="color: green"></i>
            </span>

            <span style="margin-left: 2px">
              {{ node.label }}
            </span>

          </div>
        </el-tree>
      </div>
    </system-dialog>

  </el-main>
</template>

<script>
    import menuApi from '@/api/menu';
    import systemDialog from '@/components/system/systemDialog.vue';
    import { elementIcons } from "@/utils/icons";
    import myIcon from '@/components/system/myIcon.vue';

    export default {
        name: "menuList",
        components: {
            systemDialog,
            myIcon
        },
        data() {
            return {
                menuDialog: {title: "", width: 630, height: 270, visible: false},
                menu: {
                    id: "",
                    type: "",
                    parentId: "",
                    parentName: "",
                    label: "",
                    icon: "",
                    name: "",
                    path: "",
                    url: "",
                    code: "",
                    orderNum: "",
                },
                rules: {
                    type: [{required: true, trigger: "change", message: "请选择菜单类型"}],
                    parentName: [{required: true, trigger: "change", message: "请选择所属菜单"}],
                    label: [{required: true, trigger: "blur", message: "请输入菜单名称"}],
                    name: [{required: true, trigger: "blur", message: "请输入路由名称"}],
                    path: [{required: true, trigger: "blur", message: "请输入路由路径"}],
                    url: [{required: true, trigger: "blur", message: "请输入组件路径"}],
                    code: [{required: true, trigger: "blur", message: "请输入权限字段"}],
                },

                menuList: [],
                tableHeight: 0,

                parentDialog: { title: '选择所属菜单', width: 280, height: 450, visible: false },
                //树属性定义
                defaultProps: { children: 'children', label: 'label' },
                //所属菜单列表
                parentMenuList: [],

                //图标列表
                iconList: [],
                //用户选中的图标
                userChooseIcon: "",
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.tableHeight = window.innerHeight - 180
            })
        },
        created() {
            this.search();
            //调用获取图标列表
            this.getIconList();
        },
        methods: {
            async search() {
                let res = await menuApi.getMenuList();
                if (res.success) {
                    this.menuList = res.data;
                }
            },
            openAddWindow() {
                //清空表单数据
                this.$resetForm("menuForm", this.menu);
                //设置窗口标题
                this.menuDialog.title = "新增菜单";
                //显示窗口
                this.menuDialog.visible = true;
                //清空菜单图标
                this.$nextTick(() => {
                    this.$refs["child"].userChooseIcon = "";
                })
            },
            onClose() {
                this.menuDialog.visible = false;
            },
            onConfirm() {
                this.$refs.menuForm.validate(async (valid) => {
                    if (valid) {
                        let res = null;
                        if (this.menu.id === "") {
                            //发送新增请求
                            res = await menuApi.addMenu(this.menu);
                        }else{
                            //发送修改请求
                            res = await menuApi.updateMenu(this.menu);
                        }
                        if (res.success) {
                            this.$message.success(res.message);
                            this.search();
                            this.menuDialog.visible = false;
                        }else{
                            this.$message.error(res.message)
                        }
                    }
                })
            },
            async selectParentMenu() {
                this.parentDialog.visible = true;
                let res = await menuApi.getParentMenuList();
                if (res.success) {
                    this.parentMenuList = res.data
                }
            },
            onParentClose() {
                this.parentDialog.visible = false
            },
            onParentConfirm() {
                this.parentDialog.visible = false
            },
            openBtn(data) {
                data.open = !data.open;
                this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
            },
            handleNodeClick(data) {
                //所属父级菜单ID
                this.menu.parentId = data.id;
                // 所属父级菜单名称
                this.menu.parentName = data.label;
            },
            getIconList() {
                this.iconList = elementIcons;
            },
            setIcon(icon) {
                this.menu.icon = icon;
            },
            editMenu(row) {
                //把当前要编辑的数据复制到数据域，给表单回显
                this.$objCopy(row, this.menu);
                // 设置弹框属性
                this.menuDialog.title = "编辑菜单";
                this.menuDialog.visible = true;
                this.$nextTick(() => {
                    // 菜单图标回显
                    this.$refs["child"].userChooseIcon = row.icon;
                })
            },
            async deleteMenu(row) {
                //判断是否存在子菜单
                let result = await menuApi.checkPermission({id: row.id});
                if (!result.success) {
                    this.$message.warning(result.message);
                } else {
                    let confirm = await this.$commonConfirm("确定要删除该数据吗?");
                    if (confirm) {
                        let res = await menuApi.deleteById({id: row.id});
                        if (res.success) {
                            this.$message.success(res.message);
                            this.search();
                        } else {
                            this.$message.error(res.message);
                        }
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  .iconList {
    width: 400px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    i {
      display: inline-block;
      width: 60px;
      height: 45px;
      color: #000000;
      font-size: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      line-height: 45px;
      margin: 5px;

      &:hover {
        color: orange;
        border-color: orange;
      }
    }
  }

  .chooseIcons {
    width: 175px;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 33px;
    line-height: 25px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

</style>
